<template>
  <div id="dashboard">

    <header-page />

    <div id="left">

      <table id="contract_info">

        <caption>契約者情報</caption>

        <tr>
          <td class="key">認証ID</td>
          <td class="val">{{contract_info.auth_id}}</td>
        </tr>

        <tr>
          <td class="key">会社名</td>
          <td class="val">{{contract_info.company_name}}</td>
        </tr>

        <tr>
          <td class="key">担当者名</td>
          <td class="val">{{contract_info.contact_name}}</td>
        </tr>

      </table>

      <table id="sent_info">

        <caption>送信件数</caption>

        <tr id="sent_this_month">
          <td class="key">当月送信件数</td>
          <td class="val">{{sent_info.this_month}}件</td>
        </tr>

        <tr class="line">
          <td colspan="2"><hr /></td>
        </tr>

        <tr id="sent_last_month">
          <td class="key">前月送信件数</td>
          <td class="val">{{sent_info.last_month}}件</td>
        </tr>

      </table>

    </div>

    <div id="right">

      <table id="bill_info">

        <caption>請求情報</caption>

        <tr id="next_bill">
          <td class="key">次回請求額</td>
          <td class="val">&yen;{{format_money(bill_info.before_1month_payment)}}</td>
        </tr>

        <tr id="using_history_caption">
          <td colspan="2" class="key">ご利用履歴</td>
        </tr>

        <tr class="using_history_list">
          <td class="key">
            <router-link :to="'/billing_list?start_day=' + encodeURIComponent(bill_info.this_month_start_day) + '&end_day=' + encodeURIComponent(bill_info.today)">{{time_to_jp(bill_info.this_month_start_day)}}～</router-link>
          </td>
          <td class="val">&yen;{{format_money(bill_info.this_month_payment)}}</td>
        </tr>

        <tr class="using_history_list">
          <td class="key">
            <router-link :to="'/billing_list?start_day=' + encodeURIComponent(bill_info.before_1month_start_day) + '&end_day=' + encodeURIComponent(bill_info.before_1month_end_day)">{{time_to_jp(bill_info.before_1month_start_day)}}～{{time_to_jp(bill_info.before_1month_end_day)}}</router-link>
          </td>
          <td class="val">￥{{format_money(bill_info.before_1month_payment)}}</td>
        </tr>

        <tr class="using_history_list">
          <td class="key">
            <router-link :to="'/billing_list?start_day=' + encodeURIComponent(bill_info.before_2month_start_day) + '&end_day=' + encodeURIComponent(bill_info.before_2month_end_day)">{{time_to_jp(bill_info.before_2month_start_day)}}～{{time_to_jp(bill_info.before_2month_end_day)}}</router-link>
          </td>
          <td class="val">￥{{format_money(bill_info.before_2month_payment)}}</td>
        </tr>

        <tr class="line">
          <td colspan="2"><hr /></td>
        </tr>

        <tr class="more_view">
          <td colspan="2">
            <el-button type="primary" @click.prevent="go_to_billing_list()">請求一覧へ移動</el-button>
          </td>
        </tr>
      </table>

    </div>

    <br class="clearfix" />

    <el-card id="notice">
      <div class="title"><i class="el-icon-info"></i> お知らせ</div>
      <ul v-for="(item, index) in notices" :key="item.date">
        <table v-if="index < notice_end">
          <tr>
            <th class="date">{{item.date}}</th>
            <th class="title">{{item.title}}</th>
          </tr>
          <tr v-if="item.body !== ''">
            <td>&nbsp;</td>
            <td class="body">{{item.body}}</td>
          </tr>
        </table>
      </ul>

      <el-button type="primary" @click.prevent="get_more_notice()" class="more_view" v-if="! is_notice_end()">さらに{{notice_count}}件読み込む ({{notice_end}}/{{notices.length}})</el-button>

    </el-card>

    <br />

  </div>
</template>

<script>

import HeaderPage from './header'

export default {
  name: 'dashboard',
  components: {
    HeaderPage
  },
  data () {
    return {
      contract_info: {},
      sent_info: {},
      bill_info: {},
      notices: [],
      /* https://qiita.com/knaito-531/items/50935571e908a6425514 */
      notice_first: 3, // 最初に何件表示するか
      notice_count: 1, // 「もっと見る」で何件追加表示するか
      notice_step: 0 // 「もっと見る」をクリックした数
    }
  },
  methods: {
    get_contract_info () {
      return {
        auth_id: '12345689',
        company_name: '株式会社テストカンパニー',
        contact_name: '山田　太郎'
      }
    },
    get_sent_info () {
      return {
        this_month: 35,
        last_month: 64
      }
    },
    get_bill_info () {
      return {
        this_month_start_day: '2019-03-01',
        today: '2019-03-09',
        this_month_payment: 10200,
        before_1month_start_day: '2019-02-01',
        before_1month_end_day: '2019-02-28',
        before_1month_payment: 12345,
        before_2month_start_day: '2019-01-01',
        before_2month_end_day: '2019-01-31',
        before_2month_payment: 15369
      }
    },
    time_to_jp (s) {
      let arr = s.split('-')
      return arr[0] + '年' + arr[1] + '月' + arr[2] + '日'
    },
    format_money (s) {
      return s.toLocaleString()
    },
    go_to_billing_list () {
      this.$router.push({name: 'billing_list'})
    },
    get_more_notice () {
      this.notice_step++
    },
    get_notices () {
      return [
        {date: '2019年04月18日', title: 'ゴールデンウィーク期間休業のご案内', body: '4月28日から5月7日までお休みいたします'},
        {date: '2019年03月05日', title: '2020年採用スケジュールを公開致しました', body: 'ご参照のほどよろしくお願いいたします'},
        {date: '2019年03月03日', title: '本日はひな祭りです', body: ''},
        {date: '2019年02月14日', title: '本日はバレンタインデーです', body: 'チョコレートの準備はよろしいですか？'},
        {date: '2019年02月13日', title: '2月13日になりました', body: 'これは最も古いニュースです'}
      ]
    },
    is_notice_end () {
      return this.notice_end >= this.notices.length
    }
  },
  created () {
    this.contract_info = this.get_contract_info()
    this.sent_info = this.get_sent_info()
    this.bill_info = this.get_bill_info()
    this.notices = this.get_notices()
  },
  computed: {
    notice_end () {
      return this.notice_first + this.notice_count * this.notice_step
    }
  }
}
</script>
<style>
  @import '../../static/css/global.css';
  @import '../../static/css/dashboard.css';
</style>
